<template>
    <div class="table_image_container">
        <template v-if="showImage">
            <el-image class="table_image" :src="imageUrl" :preview-src-list="previewSrcList" />
        </template>
        <template v-else>
            <div class="empty_image" />
        </template>
    </div>
</template>

<script>
export default {
    name: "TableImage",
    props: {
        params: Object,
        isArray: {
            type: Boolean,
            default: false,
        },
        showIndex: {
            type: Number,
            default: 0,
        },
    },
    data() {
        return {};
    },
    computed: {
        cellValue() {
            let { row, column } = this.params;
            return this.$XEUtils.get(row, column.property);
        },
        imageList() {
            let check = !this.$XEUtils.isEmpty(this.cellValue);
            if (check && this.isArray && this.cellValue.startsWith('[')) {
                return this.getImageUrlList(JSON.parse(this.cellValue));
            }
            return [];
        },
        showImage() {
            let check = !this.$XEUtils.isEmpty(this.cellValue);
            if (check && this.isArray) {
                check = this.$utils.isNotEmptyList(this.imageList);
            }
            return check;
        },
        imageUrl() {
            if (this.isArray) {
                return this.$utils.isNotEmptyList(this.imageList) ? this.imageList[this.showIndex] : '';
            }
            return this.getImageUrl(this.cellValue);
        },
        previewSrcList() {
            if (this.isArray) {
                return this.imageList;
            }
            return [this.imageUrl];
        },
    },
    methods: {
        getImageUrlList(list) {
            return list.map(item => this.getImageUrl(item));
        },
        getImageUrl(value) {
            if (value.startsWith('http')) {
                return value;
            }
            let account_set_sid = this.$utils.getAccountSetSid();
            return `${window.configs.requestPrefix}${this.$api.File_GetFile}${account_set_sid}/${value}`;
        },
    },
}
</script>

<style lang="less" rel="stylesheet/less" scoped>
.table_image_container {
    .table_image {
        width: 35px;
        height: 35px;
        padding: 2px;
    }

    .empty_image {
        height: 34px;
    }
}
</style>
